import React, { useState, useEffect } from "react";
import Modal from "antd/lib/modal";
import Input from 'antd/lib/input';
import Col from "antd/lib/col";
import Row from "antd/lib/row";
import Select from 'antd/lib/select';
import zhCN from 'antd/es/locale/zh_CN';
import ConfigProvider from "antd/lib/config-provider";
import Layout from "antd/lib/layout";
import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
import { UserProfile } from "@/components/proptypes";
import Payment from "@/services/payment";
import { currentUser } from "@/services/auth";
import moment from "moment";
const { TextArea } = Input;

function CreatePaymentActivityDialog({ data,paytype,paymentuserdata, dialog }) {
  //const [dataLoaded, setDataLoaded] = useState(false);
  const [projectid, setprojectid] = useState(data.projectid);
  const [projectdetailid, setprojectdetailid] = useState(data.projectdetailid);
   const [projectcode, setprojectcode] = useState(data.projectcode);
  const [employeeid, setemployeeid] = useState(data.employeeid);
  const [code, setcode] = useState(data.code);
  const [name, setname] = useState(data.name);
  const [contractcode, setcontractcode] = useState(data.contractcode);
  const [amount, setamount] = useState(data.amount);
  const [othertype, setothertype] = useState(data.othertype);
  const [otheramount, setotheramount] = useState(data.otheramount);
  const [signingtime, setsigningtime] = useState(moment(data.signingtime));
  const [expirationtime, setexpirationtime] = useState(moment(data.expirationtime));
  const [maintainer, setmaintainer] = useState(data.maintainer);
  const [signatory, setsignatory] = useState(data.signatory);
  const [recipient, setrecipient] = useState(data.recipient);
  const [message, setmessage] = useState(data.message);
  const [employeedata, setemployeedata] = useState([]);

  const isCreateStateEnabled = useState(true);

  useEffect(() => {
    let params = {
      page: 1,
      pagesize: 10000,
      customername: "",
      projectdetailid: data.projectdetailid,
      representative: "",
      code: "",
      name: "",
      difference: 1,
      major: "",
      area: "",
      bytstatus: "",
      certificate: "",
      location: "",
      userid: currentUser.id,
    }
    if (paytype === 1) {
      Payment.getuninlist(params).then(data => {
        setemployeedata(data.data)
      });
    } else {
      Payment.getunoutlist(params).then(data => {
        setemployeedata(data.data);
      });
    }

  }, [paytype]);// eslint-disable-line react-hooks/exhaustive-deps

  function employeehandlechange(value){
    let item = employeedata.filter((p) => {
      return p.employeeid === value;
    });
    if (item.length > 0) {
      setprojectid(item[0].projectid);
      setprojectdetailid(item[0].projectdetailid);
      setprojectcode(item[0].needcode);
      setemployeeid(item[0].employeeid);
      setcode(item[0].code);
      setname(item[0].name);
      setcontractcode(item[0].contractcode);
      setamount(item[0].unpayamount);
      setothertype(item[0].othertype);
      setotheramount(item[0].otheramount);
      setsigningtime(moment(item[0].signingtime));
      setexpirationtime(moment(item[0].expirationtime));
      setmaintainer(item[0].maintainer);
      setsignatory(item[0].signatory);
      setrecipient(item[0].recipient);
    }
  }
  function handleSubmit() {
    let tempdata = {
      id: data.id,//
      paymentid:data.paymentid,
      projectid: projectid,
      projectdetailid: projectdetailid,
      employeeid: employeeid,
      code: code,
      name: name,
      contractcode: contractcode,
      amount: amount,
      othertype: othertype,
      otheramount: otheramount,
      signingtime: signingtime,
      expirationtime: expirationtime,
      maintainer: maintainer,
      signatory: signatory,
      recipient: recipient,
      message: message,
      projectcode: projectcode,
      maintainername:"",
      signatoryname:"",
      recipientname:"",
    }
    dialog.close({ success: true,data: tempdata });
  }

  return (
    <Modal
      {...dialog.props}
      {...(isCreateStateEnabled ? {} : { footer: null })}
      width={document.querySelector('body').offsetWidth * 0.8}
      title="款项信息"
      okText="确定"
      cancelText="取消"

      onOk={handleSubmit}
      wrapProps={{
        "data-test": "CreateDashboardDialog",
      }}>
      <ConfigProvider locale={zhCN}>
        <Layout>
          <Layout style={{ padding: '0 24px 24px' }}>
            {/* <Row style={{ marginBottom: 5 }}>
              <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
              订单编码:</div></Col>
              <Col span={6}>
              <Input
                  value={projectcode}
                  style={{ width: "100%" }}
                  onChange={e => setprojectcode(e.target.value)}
                  placeholder="订单编码"
                  autoFocus
                />
              </Col>
            </Row> */}
             <Row style={{ marginBottom: 5 }}>
              <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
                人员:</div></Col>
              <Col span={6}>
              <Select style={{ width: "100%" }}
                  showSearch
                  optionFilterProp="children"
                  value={employeeid}
                  onChange={employeehandlechange} >
                  {(employeedata || []).map(item => (
                    <Select.Option key={item.employeeid} value={item.employeeid}>{item.name}</Select.Option>
                  ))}
                </Select>
              </Col>
              {/* <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
                人员名称:</div></Col>
              <Col span={6}>
              <Input
                  value={name}
                  style={{ width: "100%" }}
                  onChange={e => setname(e.target.value)}
                  placeholder="名称"
                />
              </Col>
              <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
                合同编号:</div></Col>
              <Col span={6}>
              <Input
                  value={contractcode}
                  style={{ width: "100%" }}
                  onChange={e => setcontractcode(e.target.value)}
                  placeholder="合同编号"
                />
              </Col> */}
            </Row> 
            <Row style={{ marginBottom: 5 }}>
              <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
                金额:</div></Col>
              <Col span={6}>
              <Input
                  style={{ width: "100%" }}
                  value={amount}
                  onChange={e => setamount(e.target.value)}
                  placeholder="金额"
                  onkeyup="this.value=this.value.replace(/\D/g,'')"
                  onafterpaste="this.value=this.value.replace(/\D/g,'')"
                  type="number"
                />
              </Col>
              <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
                其他费用类型:</div></Col>
              <Col span={6}>
              <Input
                  value={othertype}
                  style={{ width: "100%" }}
                  onChange={e => setothertype(e.target.value)}
                />
              </Col>
              <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
                其他费用:</div></Col>
              <Col span={6}>
              <Input
                  style={{ width: "100%" }}
                  value={otheramount}
                  onChange={e => setotheramount(e.target.value)}
                  placeholder="金额"
                  onkeyup="this.value=this.value.replace(/\D/g,'')"
                  onafterpaste="this.value=this.value.replace(/\D/g,'')"
                  type="number"
                />
              </Col>
            </Row>
            {/* <Row style={{ marginBottom: 5 }}>
              <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
                签约时间:</div></Col>
              <Col span={6}>
              <DatePicker
                  locale={locale}
                  style={{ width: "100%" }}
                  format="YYYY-MM-DD"
                  value={signingtime}
                  onChange={value => setsigningtime(value)}
                  placeholder="签约时间"
                />
              </Col>
              <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
                到期时间:</div></Col>
              <Col span={6}>
              <DatePicker
                  locale={locale}
                  style={{ width: "100%" }}
                  value={expirationtime}
                  format="YYYY-MM-DD"
                  onChange={value => setexpirationtime(value)}
                  placeholder="到期时间"
                />
              </Col>
            </Row>
            <Row style={{ marginBottom: 5 }}>
              <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
                维护人:</div></Col>
              <Col span={6}>
              <Select style={{ width: "100%" }}
                showSearch
                optionFilterProp="children"
                value={maintainer}
                onChange={value => setmaintainer(value)} >
                {(paymentuserdata || []).map(item => (
                  <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>
                ))}
              </Select>
              </Col>
              <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
                签约人:</div></Col>
              <Col span={6}>
              <Select style={{ width: "100%" }}
                  showSearch
                  optionFilterProp="children"
                  value={signatory}
                  onChange={value => setsignatory(value)} >
                  {(paymentuserdata || []).map(item => (
                    <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>
                  ))}
                </Select>
              </Col>
              <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
                收证人:</div></Col>
              <Col span={6}>
              <Select style={{ width: "100%" }}
                  showSearch
                  optionFilterProp="children"
                  value={recipient}
                  onChange={value => setsignatory(value)} >
                  {(paymentuserdata || []).map(item => (
                    <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>
                  ))}
                </Select>
              </Col>
            </Row>  */}
             <Row style={{ marginBottom: 5 }}>
              <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
                备注:</div></Col>
              <Col span={6}>
                <TextArea
                  value={message}
                  onChange={e => setmessage(e.target.value)}
                  placeholder="备注"
                  autoSize={{ minRows: 3, maxRows: 5 }}
                />
              </Col>
            </Row> 
          </Layout>
        </Layout>
      </ConfigProvider>
    </Modal>
  );
}

CreatePaymentActivityDialog.propTypes = {
  paytype: UserProfile.isRequired,
  dialog: DialogPropType.isRequired,
};

export default wrapDialog(CreatePaymentActivityDialog);
